<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录账号信息管理</title>
<link rel="stylesheet" type="text/css"
	href="../assets/admin/layui/css/layui.css" />
<link rel="stylesheet" type="text/css"
	href="../assets/admin/css/admin.css" />
</head>

<body>
	<div class="page-content-wrap" id="userManage">
		<h5
			style="text-align: center; font-size: 20px; line-height: 25px; color: #666">登录账号信息管理</h5>
		<hr>
		<div class="layui-form-item">
			<div class="layui-inline tool-btn">
				<button class="layui-btn layui-btn-small site-demo-active"
					data-type="userAdd">
					<i class="layui-icon">&#xe654;</i>
				</button>
			</div>
			<div class="layui-inline">
				<input type="text" id="userName" placeholder="请输入用户名"
					autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn layui-btn-normal site-demo-active"
				data-type="search" id="searchInfo">搜索</button>
			<table class="layui-hide" id="test" lay-filter="test"></table>

		</div>


		<hr></hr>
		<h5 style="text-align: center;">@2019.HR</h5>
	</div>
	<script src="../assets/admin/layui/layui.all.js" type="text/javascript"
		charset="utf-8"></script>
	<script>
		layui.use('table', function() {
			var $ = layui.jquery
			var table = layui.table;

			table.render({
				id:'userList',
				elem : '#test',
				url : '/user/getAll',
				title : '用户数据表',
				totalRow : true,
				cols : [ [
					
						{
							field : 'userName',
							title : '用户名'
						},
						{
							field : 'userPassword',
							title : '密码'
						},
						{
							field : 'createTime',
							title : '创建时间',
							templet : function(res) {
								return '<em>' + res.createTime.substring(0, 19)
										+ '</em>'
							}
						},
						{
							field : 'role',
							title : '角色',
							templet : function(res) {
								var role=res.role;
								if(1==role){
									return '<em style="color:red">超级管理员</em>'
								}else{
									return '<em style="color:blue">普通管理员</em>'
								}
							}
						}, {
							field : 'userStatus',
							title : '账号状态',
							templet : function(res) {
								var userStatus=res.userStatus;
								if(1==userStatus){
									return '<em>正常</em>'
								}else if(2==userStatus){
									return '<em style="color:red">锁定</em>'
								}
							}
						},{
							fixed : 'right',
							title : '操作',
							width : 150,
							templet : function(res) {
								var role=res.role;
								var userStatus=res.userStatus;
								if(1==role){
									return '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>'
								}else{
									if(1==userStatus){
										return '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="lock">锁定</a>'
									}else if(2==userStatus){
										return '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a><a class="layui-btn layui-btn-normal  layui-btn-sm " lay-event="unlock">解锁</a>'
									}
								}
							}
						} ] ],
				page : true
			});
			//事件绑定
			var active = {
				userAdd : function() {
						
						layer.open({
						      type: 2,
						      title: '添加账号',
						      shadeClose: true,
						      shade: false,
						   /*    maxmin: true,  *///开启最大化最小化按钮
						      area: ['800px', '400px'],
						      content: '/user/user-add.html'
						    });
					
					},
				search:function(){
					var name=$("#userName").val();
					table.reload('userList',{
							method: 'POST'
						 , where: {"userName":name},page: {
						    curr: 1 //重新从第 1 页开始
						  }
						 
						})
				}
			};
			//表格事件绑定

		table.on('tool(test)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				edit(data);
			} else if (obj.event === 'lock') {
				layer.confirm('真的锁定吗', function(index) {
					lock(data,index);
				});
			} else if (obj.event === 'unlock') {
				
				layer.confirm('真的解锁吗', function(index) {
					unlock(data,index);
				});
			}
		});
		function lock(data,index){
			var param={
					"userId":data.userId,
					"userStatus":2
			};
			 $.ajax({
	                //几个参数需要注意一下
	                    type: "POST",//方法类型
	                    dataType: "json",//预期服务器返回的数据类型
	                    url: "/user/updateUser",//url
	                    data: param,
	                    success: function (result) {
	                    	if (result.code == "0") {
	                    			layer.close(index);
	                    			layer.msg("锁定账号成功");
	                    			table.reload('userList');
			                    }else{
			                    	layer.msg(result.msg);
			                    }
	                    },
	                    error : function() {
	                    	layer.msg('服务器错误', {
	                            icon: 5
	                        });
	                    }
	                });
		}
		function unlock(data,index){
			var param={
					"userId":data.userId,
					"userStatus":1
			};
			 $.ajax({
	                //几个参数需要注意一下
	                    type: "POST",//方法类型
	                    dataType: "json",//预期服务器返回的数据类型
	                    url: "/user/updateUser",//url
	                    data: param,
	                    success: function (result) {
	                    	if (result.code == "0") {
	                    			layer.close(index);
	                    			layer.msg("账号解锁成功");
	                    			table.reload('userList');
			                    }else{
			                    	layer.msg(result.msg);
			                    }
	                    },
	                    error : function() {
	                    	layer.msg('服务器错误', {
	                            icon: 5
	                        });
	                    }
	                });
		}
		function edit(data){
			var editFrom = layui.layer.open({
		        title : "编辑账号信息",
		        type : 2,
		        content : "/user/user-edit.html",//弹出层页面
		        area: ['800px', '400px'],
		        success : function(layero, index){
		            var body = layui.layer.getChildFrame('body', index);
		            //获取窗口对象
		            var iframeWindow = layero.find('iframe')[0].contentWindow;
		            body.find("#userName").val(data.userName);
		            body.find("#userId").val(data.userId);
		            body.find("#userPassword").val(data.userPassword);
		            iframeWindow.layui.form.render();
		        }});
		}
		$('#userManage .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

	});
	</script>
</body>

</html>